<template>
	<view class="Agent">
		<u-navbar :auto-back="true" :placeholder="true" title="代理商中心" :bg-color="bgColor"></u-navbar>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="agent" class="agent_box">
			<view class="agent_top">
				<image class="agent_bg" src="/static/agent_bg1.png"></image>
				<view class="agent_content">
					<view class="flex_box agent_user">
						<view class="agent_img">
							<u-image width="104rpx" height="104rpx" shape="circle" :src="agent.avatar"></u-image>
						</view>
						<view class="agent_user_content">
							<view class="agent_user_name">{{agent.username}}</view>
							<view class="agent_user_top_sub">{{agent.nickname}}</view>
						</view>
					</view>
					<view class="flex_box flex_row_between account_box">
						<view class="flex_box flex_row_center flex_direction account_item">
							<view class="account_num">{{agent.money}}</view>
							<view class="account_text">账户余额(元)</view>
						</view>
						<u-line color="#808E9B" length="72rpx" direction="col"></u-line>
						<view class="flex_box flex_row_center flex_direction account_item">
							<view class="account_num">{{agent.convert}}</view>
							<view class="account_text">卡密数量(张)</view>
						</view>
						<u-line color="#808E9B" length="72rpx" direction="col"></u-line>
						<view class="flex_box flex_row_center flex_direction account_item">
							<view class="account_num">{{agent.card}}</view>
							<view class="account_text">会员数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_box">
				<view @click="$goUrl('/pages/mine/agent/distribution','to')" class="flex_box flex_row_between nav_item">
					<view class="flex_box">
						<u-image width="48rpx" height="48rpx" src="/static/icon5.png"></u-image>
						<view class="nav_name">分销记录</view>
					</view>
					<u-icon name="arrow-right" color="#1E272E"></u-icon>
				</view>
				<view @click="$goUrl('/pages/mine/agent/wallet','to')" class="flex_box flex_row_between nav_item">
					<view class="flex_box">
						<u-image width="48rpx" height="48rpx" src="/static/icon11.png"></u-image>
						<view class="nav_name">我的钱包</view>
					</view>
					<u-icon name="arrow-right" color="#1E272E"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		agentIndex,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				bgColor: '#E5F3FE',
				agent: null,
				pageLoading: true,
			};
		},
		onLoad() {
			that = this;
		},
		onShow() {
			that.agentIndex();
		},
		onReachBottom() {
			that.getMore();
		},
		onPageScroll(e) {
			that.bgColor = e.scrollTop > 40 ? '#45B9A2' : 'transparent';
		},
		methods: {
			// 获取个人信息
			agentIndex() {
				agentIndex({params: {agent_token: that.agentInfo.agent_token}})
					.then(res => {
						if (res.code == 1) {
							that.agent = res.data,that.pageLoading = false
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.Agent {
		min-height: 100vh;
		background-color: #F6F8FA;
		.agent_box{
			.agent_top{
				position: relative;
				background-color: #E5F3FE;
				padding: 0 80rpx;
				.agent_bg{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 316rpx;
					height: 384rpx;
					z-index: 1;
				}
				.agent_content{
					position: relative;
					z-index: 2;
					.agent_user{
						height: 210rpx;
						.agent_img{
							width: 108rpx;
							height: 108rpx;
							border-radius: 50%;
							border: 2rpx solid #cccccc;
						}
						.agent_user_content{
							width: 470rpx;
							padding-left: 12rpx;
							.agent_user_name{
								width: 470rpx;
								font-size: 32rpx;
								font-weight: bold;
								line-height: 48rpx;
								height: 48rpx;
								color: #1E272E;
								margin-bottom: 8rpx;
							}
							.agent_user_sub{
								font-size: 24rpx;
								color: #808E9B;
								line-height: 40rpx;
							}
						}
					}
					.account_box{
						height: 176rpx;
						background: rgba(255, 255, 255, 0.7);
						box-shadow: inset 0rpx 4rpx 8rpx 2rpx #FFFFFF;
						border-radius: 24rpx 24rpx 0rpx 0rpx;
						.account_item{
							width: 195rpx;
							.account_num{
								font-size: 40rpx;
								color: #FF3F34;
								font-weight: bold;
								line-height: 50rpx;
								margin-bottom: 10rpx;
							}
							.account_text{
								font-size: 24rpx;
								color: #1E272E;
								font-weight: 500;
								line-height: 36rpx;
							}
						}
					}
				}
			}
			.nav_box{
				padding: 36rpx;
				.nav_item{
					background-color: #FFFFFF;
					border-radius: 12rpx;
					padding: 0 36rpx;
					height: 112rpx;
					margin-bottom: 36rpx;
					.nav_name{
						font-size: 28rpx;
						color: #1E272E;
						margin-left: 12rpx;
						font-weight: bold;
					}
				}
			}
		}
		
	}
</style>
